<template>
  <div id="app">
      <h3>案例：折叠面板</h3>
      <div>
          <div class="title">
              <h4>芙蓉楼送辛渐</h4>
              <!-- 绑定点击事件 -->
              <span class="btn" @click="flag = !flag">
                  <!-- 根据isShow的值显示不同文字 -->
                  {{ flag ? '收起' : '展开' }}
              </span>
          </div>
          <!-- v-show配合变量来控制标签隐藏出现 -->
          <div class="container" v-show="flag">
              <p>寒雨连江夜入吴,</p>
              <p>平明送客楚山孤。</p>
              <p>洛阳亲友如相问，</p>
              <p>一片冰心在玉壶。</p>
          </div>
      </div>
  </div>
</template>
  
<script>
/*  
    1. 点击右上角的 ’收起‘ 按钮， 隐藏下面的内容
    2. 点击右上角的 ’展开‘ 按钮， 显示下面的内容
    3. 通过12步骤分析，由于下面内容是静态数据所有选用v-show来显示和隐藏
    4. 通过不同的状态，来改变右上角按钮的文本
*/
    export default {
        name: 'DemoIndex8',
        data() {
            return {
                flag: true,
            }
        }
    }
</script>
  
<style lang="less" scoped>
      body {
          background-color: #ccc;
          #app {
              width: 400px;
              margin: 20px auto;
              background-color: #fff;
              border: 4px solid blueviolet;
              border-radius: 1em;
              box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
              padding: 1em 2em 2em;
              h3 {
                  text-align: center;
              }
              .title {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  border: 1px solid #ccc;
                  padding: 0 1em;
              }
              .title h4 {
                  line-height: 2;
                  margin: 0;
              }
              .container {
                  border: 1px solid #ccc;
                  padding: 0 1em;
              }
              .btn {
                  /* 鼠标改成手的形状 */
                  cursor: pointer;
              }
          }
      }
  </style>